<template>
  <el-dialog
      title="关于我们"
      :close-on-click-modal="false"
      :destroy-on-close="true">
    <div class="about">
      <div class="container">
        <div class="logo">
          <img src="@/assets/logo.png" />
        </div>
        <div class="title">
          {{ constant.name }} <span class="version">{{ constant.version }}</span>
        </div>
        <div class="author">
          {{ constant.author }}
        </div>
        <div class="desc">
          <p>该插件已经具备备份、导入、快速使用等特点，注意数据备份。</p>
          <p>开通utools会员，数据可同步。</p>
        </div>
        <div class="action">
          <el-button @click="openUrl(constant.homepage)">个人主页</el-button>
          <el-button @click="openUrl(constant.repo)">开源地址</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";

export default {
  props: {
    openDlg: {
        type: Boolean,
        default: false
    }
  },

  setup(props) {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      constant : proxy.$constant,
    })
    console.log('点击了dlg事件: ' + props.openDlg)
    //proxy.$alert('点击了dlg事件: ' + props.openDlg)

    const openUrl = (url) => {
      window.utools.shellOpenExternal(url);
    }

    onMounted(() => {

    })

    return {
      ...toRefs(state),
      openUrl,
    }
  }
}

</script>

<style scoped>
  .about {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .logo img {
    height: 80px;
  }

  .title {
    font-size: 2em;
    background: linear-gradient(60deg, #E21143, #FFB03A);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bolder;
    margin-top: 15px;
    user-select: none;
  }

  .title span { font-size: 14px; }

  .author {
    margin-top: 14px; color: #0077aa; font-weight: bold;
  }

  .desc {
    margin-top: 15px;
    user-select: none;
  }

  .action { margin-top: 24px; }


</style>